<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-13 09:20:15
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-09-17 15:25:19
-->
<template>
  <!-- html只能有一个根元素 -->
  <div class="head">
    <div class="wrapper">
      <div @click="toHomeHandeler()" class="logo"><i class="el-icon-platform-eleme"></i></div>
      <div class="title" @click="toHomeHandeler()">游学天际</div>
      <div class="category">
        <ul>
          <li @click="toListHandler(item.id)" v-for="item in categorys" :key="item.id">{{item.name}}</li>
        </ul>
      </div>
      <div class="contact" @click="contactHandler()">call Me</div>
    </div>
  </div>
</template>

<script>
import {get} from '../../utils/request'
export default {
  // 存放数据
  data() {
    return {
      // 存放栏目
      categorys:[],
      // 轮播数组
      carousels:[],
    }
  },
  // 用于存放方法
  methods:{
    // 查询所有分类信息
    findAllCategory(){
      // 数据交互
      get('/index/category/findCategoryTree').then((res)=>{
        // console.log(res);
        if(res.status === 200){
          this.categorys = res.data
        }else{
          this.$message({
            type:'error',
            message:res.message
          })
        }
      })
    },
    //查询所有轮播图
    findAllCarousel(){
      // 数据交互
      get('/index/carousel/findAll').then((res)=>{
        console.log(res);
        this.carousels = res.data
      })
    },
    // 点击查看联系我们详情页
    contactHandler(){
      // 跳转页面
      this.$router.push({
        path:'/contact'
      })
    },
    // 回到首页
    toHomeHandeler(){
      // 跳转至首页
      this.$router.push({
        path:'/home'
      })
    },
    // 跳转至list页面
    toListHandler(id){
      this.$router.push({
        path:'/list',
        query:{
          categoryId:id
        }

      })
    }
  },
  // 生命周期钩子函数，页面加载完成之后
  created(){
    // 调用查询所有栏目信息的方法
    this.findAllCategory()
  }
}
</script>

<style scoped lang="scss">
.head{
  box-shadow: 0 1px 5px #ccc;
  padding: .5em 0;
}
.wrapper{
  width: 90%;
  height: 60px;
  // background-color: azure;
  line-height: 60px;
  .logo{
    color: seagreen;
    font-size: 50px;
    float: left;
    cursor: pointer;
    img{
      width: 50px;
      height: 50px;
    }
  }
  .title{
    float: left;
    font-size: 20px;
    font-weight: 700;
    padding: 0 1em;
    cursor: pointer;
  }
  .category{
    float: left;
    ul li{
      cursor: pointer;
      float: left;
      padding: 0 2em;
    }
  }
  .contact{
    cursor: pointer;
    float: right;
  }
}
</style>